import React from 'react';
import { Card, Row, Col } from 'antd';
import {
  PlusSquareOutlined,
  PlusOutlined,
  PlusCircleOutlined,
  EditOutlined,
  DeleteOutlined,
  UserDeleteOutlined,
  UsergroupDeleteOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
} from '@ant-design/icons';

import './index.less';
import cls from 'classnames';

const iconList = [
  {
    icon: <PlusSquareOutlined className={cls('theme-layout-icon')} />,
    key: 'PlusSquareOutlined',
  },
  {
    icon: <PlusCircleOutlined className={cls('theme-layout-icon')} />,
    key: 'PlusCircleOutlined',
  },
  {
    icon: <PlusOutlined className={cls('theme-layout-icon')} />,
    key: 'PlusOutlined',
  },
  {
    icon: <EditOutlined className={cls('theme-layout-icon')} />,
    key: 'EditOutlined',
  },
  {
    icon: <DeleteOutlined className={cls('theme-layout-icon')} />,
    key: 'DeleteOutlined',
  },
  {
    icon: <UserDeleteOutlined className={cls('theme-layout-icon')} />,
    key: 'UserDeleteOutlined',
  },
  {
    icon: <UsergroupDeleteOutlined className={cls('theme-layout-icon')} />,
    key: 'UsergroupDeleteOutlined',
  },
  {
    icon: <EyeOutlined className={cls('theme-layout-icon')} />,
    key: 'EyeOutlined',
  },
  {
    icon: <EyeInvisibleOutlined className={cls('theme-layout-icon')} />,
    key: 'EyeInvisibleOutlined',
  },
];

export const TabIcon: React.FC<any> = React.memo(() => {
  return (
    <Card
      style={{ marginTop: '16px' }}
      title={'图标（icon）'}
      bodyStyle={{ padding: 10 }}
    >
      <Row gutter={[16, 16]}>
        {iconList?.map((item) => {
          return (
            <Col
              span={2}
              key={item.key}
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <a>{item?.icon}</a>
            </Col>
          );
        })}
      </Row>
    </Card>
  );
});
